<template>
    <div class="tamplate-company-page">
        <el-card shadow="never" v-loading="loading">
            <div class="flex items-center mb-10">
                <div>企业自建的学习地图页</div>
                <el-input v-model="form.keyword" class="input-width ml-20 mr-2" placeholder="企业搜索"></el-input>
                <el-button @click="fetchData" type="primary">搜索</el-button>
                <el-button @click="onReset" type="primary">重置</el-button>
            </div>
            <div class="flex flex-wrap" v-if="data && data.length">
                <div
                    @click="onAddClick(item)"
                    v-for="item in data"
                    :key="item.id"
                    class="flex flex-col justify-between item relative">
                    <div class="text-base title">{{ item.title }}</div>
                    <div class="content w-full">
                        <div class="text-xs">企业名称：{{ item.company }}</div>
                    </div>
                </div>
            </div>
            <div class="flex" v-else>
                <div class="flex justify-center items-center item relative">
                    <div class="text-base title">暂无数据</div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {
    },
    data() {
        return {
            loading: false,
            data: [],
            form: {
                isCompanyTemplate: true,
                keyword: '',
            },
        };
    },
    methods: {
        onReset() {
            this.form.keyword = '';
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('template', {params: this.form}).then((res) => {
                this.data = res;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAddClick(row) {
            const query = {
                id: row.id,
            };

            this.$router.push({
                name: 'Template.Detail',
                query: row.id ? query : '',
            });
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此企业模板？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`template/${row.id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.tamplate-company-page {
    min-height: 100%;

    .input-width {
        max-width: 300px;
    }

    .el-card {
        min-height: 100%;
    }

    .input-width {
        max-width: 300px;
    }

    .item {
        width: 250px;
        height: 155px;
        padding: 26px 18px 18px 26px;
        box-shadow: 0 0 3px 1px rgb(240, 240, 240);
        border-radius: 4px;
        margin: 0 20px 20px 0;

        &:hover {
            box-shadow: 0 0 12px 2px rgb(220, 220, 220);
        }

        .content, .el-icon-plus {
            color: #b4b4b4;
        }

        .el-icon-plus {
            font-size: 50px;
        }

        .icon {
            position: absolute;
            top: 0;
            right: 0;
            padding: 5px 10px;
            border-radius: 0 4px;
            background: rgba(24, 144, 255, .1);
            color: rgb(24, 144, 255);
        }
    }
}
</style>
